<template>
  <div class="nodeSwitch">
    <Form
      :model="G_formItem"
      :label-width="80"
      label-colon
      :disabled="G_disabled"
      class="form"
    >
      <Row>
        <FormItem label="节点ID" class="formItem">
          <span>{{ G_formItem.nodeID }}</span>
        </FormItem>
        <FormItem label="节点类型" class="formItem"
          ><span>{{ G_formItem.nodeName }}</span>
        </FormItem>
      </Row>

      <div
        v-for="(item, idx) in G_formItem.exprs"
        :key="idx"
        @mouseenter="selected(item.edgeID, true)"
        @mouseleave="selected(item.edgeID, false)"
      >
        <FormItem label="表达式" class="formItem">
          <span :class="G_disabled ? 'disabled' : 'ifExpr'">
            <!-- <Input
              v-model="item.expr"
              readonly
              placeholder="无内容"
              icon="md-settings"
              @on-click="exprClick(item.edgeID)"
              @on-change="onChange($event, item.edgeId)"
            />
             -->
            <i title="高级编辑"
              ><Button
                icon="md-settings"
                type="text"
                :disabled="G_disabled"
                size="small"
                @click="exprClick(item.edgeID)"
              ></Button
            ></i>
            <code-input
              ref="codeInput"
              v-model="item.expr"
              :readonly="G_disabled"
              :compBoxInfo="GT_compBoxInfo"
              @on-changes="onChange($event, item.edgeId)"
            ></code-input>
          </span>
        </FormItem>
        <FormItem label="功能说明" class="formItem">
          <Input
            v-model="item.explain"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="无内容"
            @on-change="onChange($event, item.edgeId)"
          />
        </FormItem>
        <div v-if="G_formItem.exprs.length > idx + 1" class="dottedLine"></div>
      </div>
    </Form>
  </div>
</template>
<script lang="ts">
import { I_switch, I_ruleEditor, Tsrv, T_srv, ts, ifs, vue } from '../config';
import codeInput from '../../codeInput/index.vue';

@T_srv.comp({
  components: {
    codeInput
  }
})
export default class nodeSwitch extends vue {
  @T_srv.prop({ type: Object }) params: any;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private G_disabled: boolean = true;

  private G_formItem: I_switch = {
    type: 'caseNode',
    nodeID: '',
    nodeName: '[当]节点',
    exprs: []
  };

  // 记录点击打开资源面版的edgeID
  private G_currClickKey: string = '';

  created() {
    this.G_compID = this.compBoxInfo.compID;
    this.GT_compBox = this.compBoxInfo.TcompBox;
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
    this.G_disabled = this.params.disabled;
    // 接收prop 参数
    if (this.params.data && this.params.data[`nodeID`]) {
      this.G_formItem.nodeID = this.params.data[`nodeID`];
    }
    if (this.params.data && this.params.data[`exprs`]) {
      this.G_formItem.exprs = this.params.data[`exprs`];
    }
  }

  mounted() {
    this.GT_compBox.addCompMergeName(this.G_compID, 'nodeAttr_switch', this);
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, 'nodeAttr_switch');
  }

  setDisabled(P_s: boolean) {
    this.G_disabled = P_s;
  }

  exprClick(edgeID: string) {
    if (this.G_disabled) {
      return;
    }
    this.G_currClickKey = edgeID;
    const L_exprs = this.G_formItem.exprs.filter(ele => {
      return ele.edgeID === edgeID;
    });

    this.GT_compBox.getCompMergeName(this.G_compID, `ruleEditor`).addModel(
      `resources`,
      {
        compBoxInfo: this.compBoxInfo,
        fromCompName: 'nodeAttr_switch',
        value: L_exprs[0].expr
      }
    );
  }

  setValue(value: string) {
    this.G_formItem.exprs.forEach(item => {
      if (item.edgeID === this.G_currClickKey) {
        item.expr = value;
      }
    });
  }

  selected(edgeID: string, isShow: boolean) {
    this.GT_compBox.getCompMergeName(
      this.G_compID,
      `ruleEditor`
    ).showSwitchNodeEdge(edgeID, isShow);
  }

  /**
   * @Author: wiz
   * @param {*} P_e
   * @param {*} P_s
   * @return {*}
   * @description: form 数据改变
   */
  onChange(P_e?, P_s?: string) {
    const L_editor: I_ruleEditor = this.GT_compBox.getCompMergeName(
      this.G_compID,
      `ruleEditor`
    ).G_editor;
    L_editor.setNodeAttrData(this.G_formItem);
  }
}
</script>
<style lang="scss" scoped>
.nodeSwitch {
  height: 100%;
  width: 100%;

  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid #a1a1b3;
  border-bottom: 1px solid #a1a1b3;
}
.formItem {
  margin-bottom: 5px;
}
.form {
  padding-top: 5px;
}
.ifExpr ::v-deep .ivu-icon {
  cursor: pointer;
  color: #2d8eff;
}
.disabled ::v-deep .ivu-icon {
  cursor: no-drop;
}
.dottedLine {
  border-top: 1px dashed #bebec5;
  margin-top: 6px;
  margin-bottom: 6px;
  width: 100%;
}
</style>
